@import '../../styles/var.scss';
.is-error .img-upload{
  border-color:$color-error;
}
.img-upload {
    border: 1px dashed $border-color-base;
    display: inline-block;
    height: 150px;
    width: 150px;
    vertical-align: middle;
    position: relative;
    overflow:hidden;
    &:hover {
        border-color: $color-primary;
        .el-icon-plus {
            font-size: 28px;
            color: $color-primary;
        }
    }
    box-sizing: border-box;
    button {
        border: 0;
        outline: none;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: transparent;
        cursor: pointer;

        .el-icon-plus {
            font-size: 28px;
            color: #8c939d;
        }
        img {
            max-width: 100%;
            max-height: 100%;
        }
    }
    .el-upload{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:100%;
      z-index:90;
      &__input{
        position:absolute\0;
        top:0\0;
        right:0\0;
        height:100%\0;
        width:100%\0;
        opacity:0\0;
        display:block\0;
      }
    }
    &-value{
      .el-upload{
        height:30px;
        bottom:-30px;
        background:rgba(0,0,0,0.6);
      }
      &:hover .el-upload{
        bottom:0px;
      }
      &-button{
        color:#fff;
        height:30px;
        font-size: 14px;
        i{
          font-size:18px;
          margin-right:5px;
          vertical-align: middle;
        }
      }
    }
}